<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common_head :: commonHead('graph')"></head>
<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <div th:include="/header :: header"></div>
                <!--menu-right-->
                <!--//menu-right-->
                <div class="clearfix"></div>
            </div>
            <!-- //header-ends -->
            <!--/outer-wp-->
            <div class="outter-wp">
                <!--sub-heard-part-->
                <div class="sub-heard-part">
                    <ol class="breadcrumb m-b-0">
                        <li><a href="index.html">Home</a></li>
                        <li class="active">Maps</li>
                    </ol>
                </div>
                <!--//sub-heard-part-->
                <!--/graph-visual-->
                <div class="graph-visual">

                    <h2 class="inner-tittle">数据录入</h2>
                    <!-- input data points   by SeAxiAoD -->
                    <h4 class="inner-tittle">坐标点录入：</h4>
                    <div class="vali-form">
                        <div class="col-md-3">数据点数</div>
                        <div class="col-md-3">数据点名称</div>
                        <div class="col-md-3">X轴坐标</div>
                        <div class="col-md-3">Y轴坐标</div>
                    </div>
                    <div class="input_point vali-form">
                        <input class="col-md-3 input_txt point" disabled="disabled" style="background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(187, 187, 187);" title="点1" id="point1" name="" value="点1" type="text">
                        <input value="" style="color: rgb(51, 51, 51);" class="col-md-3 input_txt title" id="title1" name="" type="text">
                        <input value="" style="color: rgb(51, 51, 51);" class="col-md-3 x" id="x1" name="" type="text">
                        <input value="" style="color: rgb(51, 51, 51);" class="col-md-3 y" id="y1" name="" type="text">
                        <div class="clear"></div>
                    </div>
                    <div class="form_add_point" style=" margin-top:10px;"><span id="txtNumF">增加数据点数：</span><input style="width:100px;" id="txtNum_point" type="text" value="1" /><a href="#" id="add_point">增加</a></div>
                    <!-- input data points   by SeAxiAoD -->

                    <!-- input edges   by SeAxiAoD -->
                    <h4 class="inner-tittle">数据边录入：</h4>
                    <div class="vali-form">
                        <div class="col-md-4">数据边数</div>
                        <div class="col-md-4">起始点</div>
                        <div class="col-md-4">终止点</div>
                    </div>
                    <div class="input_edge vali-form">
                        <input disabled="disabled" style="background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(187, 187, 187);" title="边1" class="col-md-4 input_txt edge" id="edge1" name="" value="边1" type="text">
                        <input value="" style="color: rgb(51, 51, 51);" class="col-md-4 input_txt start_point" id="start_point1" name="" type="text">
                        <input value="" style="color: rgb(51, 51, 51);" class="col-md-4 input_txt end_point" id="end_point1" name="" type="text">
                        <div class="clear"></div>
                    </div>
                    <div class="form_add_edge" style=" margin-top:10px;"><span id="txtNumF">增加数据边：</span><input style="width:100px;" id="txtNum_edge" type="text" value="1" /><a href="#" id="add_edge">增加</a></div>
                    <!-- input edges   by SeAxiAoD -->

                    <h2 class="inner-tittle">关系图</h2>
                    <div class="graph">
                        <div class="map_container">
                            <a class="btn blue four" type="button" id="draw">绘图</a>
                            <div id="graph" style="width: 1000px;height:800px;"></div>
                        </div>
                    </div>
                </div>
                <!--/graph-visual-->

            </div>
            <!--//outer-wp-->
            <!--footer section start-->
            <footer th:include="/footer :: footer">
                <!--<p>Copyright &copy; 2018.Panda company</p>-->
            </footer>
            <!--footer section end-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <div class="sidebar-menu" th:include="/sidebar :: sidebar"></div>
    <div class="clearfix"></div>
</div>


<script>
    option = {
        title: {
            text: '关系图'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 50,
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                data: [{
                    name: '节点1',
                    x: 300,
                    y: 300
                }, {
                    name: '节点2',
                    x: 800,
                    y: 300
                }, {
                    name: '节点3',
                    x: 550,
                    y: 100
                }, {
                    name: '节点4',
                    x: 550,
                    y: 500
                }],
                // links: [],
                links: [{
                    source: '节点1',
                    target: '节点3'
                }, {
                    source: '节点2',
                    target: '节点3'
                }, {
                    source: '节点2',
                    target: '节点4'
                }, {
                    source: '节点1',
                    target: '节点4'
                }],
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                }
            }
        ]
    };
    myChart = echarts.init(document.getElementById("graph"));
    $("#draw").click(function () {
        // get point data
        var point_str='[';
        $('.input_point').each(function () {
            var title = $(this).find('.title').val();
            var x = $(this).find('.x').val();
            var y = $(this).find('.y').val();
            if (x && y && title){
                point_str += '{name:"' + title + '",x:' + x + ',y:' + y + '},';
            }
        })
        point_str += ']';

        var point = eval(point_str)
        // get edge data
        var edge_str='[';
        $('.input_edge').each(function () {
            var source = $(this).find('.start_point').val();
            var target = $(this).find('.end_point').val();
            if (source && target){
                edge_str += '{source:"' + source + '",target:"' + target + '"},';
            }
        })
        edge_str += ']';

        var edge = eval(edge_str)
        option.series[0].data=point;
        option.series[0].links=edge;
        myChart.setOption(option);
    });

    // add by SeAxiAoD
    $('#add_point').click(function (e) {
        var index = $('.input_point').size() + 1;
        var disabled = $($('.name')[0]).attr('disabled');
        var style = $($('.name')[0]).attr('style');
        var txtnum = $('#txtNum_point').val();
        for(var i = 0; i < txtnum; i++){
            var item = $('<div class="input_point vali-form"><input disabled="disabled" style="background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(187, 187, 187);" type="text" value="点' + index + '" name="" id="point' + index + '" class="col-md-3 input_txt point"> <input type="text" style="color: rgb(51, 51, 51);" name="" id="title' + index + '" class="col-md-3 input_txt title"> <input type="text" style="color: rgb(51, 51, 51);" name="" id="x' + index + '" class="col-md-3 input_txt x"> <input type="text" style="color: rgb(51, 51, 51);" name="" id="y' + index + '" class="col-md-3 input_txt y"> <div class="clear"></div></div>');
            $('.form_add_point').before(item);
            item.find('.name').attr({
                'disabled': disabled,
                "style": style ? style : ""
            });
            index++;
        }
        $('#txtNum').val('1');
        $('.name,.title,.x,.y').blur(function () {
            validate($(this).val(), $(this));
        });
        e.preventDefault()
    });
    $('#add_edge').click(function (e) {
        var index = $('.input_edge').size() + 1;
        var disabled = $($('.name')[0]).attr('disabled');
        var style = $($('.name')[0]).attr('style');
        var txtnum = $('#txtNum_edge').val();
        for(var i = 0; i < txtnum; i++){
            var item = $('<div class="input_edge vali-form"><input disabled="disabled" style="background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(187, 187, 187);" type="text" value="边' + index + '" name="" id="edge' + index + '" class="col-md-4 input_txt edge"> <input type="text" style="color: rgb(51, 51, 51);" name="" id="start_point' + index + '" class="col-md-4 input_txt start_point"> <input type="text" style="color: rgb(51, 51, 51);" name="" id="end_point' + index + '" class="col-md-4 input_txt end_point"> <div class="clear"></div></div>');
            $('.form_add_edge').before(item);
            item.find('.name').attr({
                'disabled': disabled,
                "style": style ? style : ""
            });
            index++;
        }
        $('#txtNum').val('1');
        $('.edge,.start_point,.end_point').blur(function () {
            validate($(this).val(), $(this));
        });
        e.preventDefault()
    });

</script>
</body>
</html>